<template>
  <!-- 添加或修改报销发票信息管理对话框 -->
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body v-dialogDrag width="80%">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form :model="form" :rules="rules" label-width="80px" ref="form">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-col :span="24">
              <el-form-item label="申请日期" prop="imburseDate">
                <el-date-picker clearable placeholder="请选择报销日期" type="date" v-model="form.imburseDate"
                  value-format="yyyy-MM-dd" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="报销金额" prop="imburseMoney">
                <el-input disabled placeholder="请输入报销金额" v-model="form.imburseMoney" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="请款事由" prop="qksy">
                <el-input placeholder="请输入请款事由" v-model="form.qksy" /><!-- @change="changeQksy"-->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款备注" prop="qkbz">
                <el-input placeholder="请输入付款备注(不需备注请填“无”)" type="textarea" v-model="form.qkbz" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="其他备注">
                <el-input placeholder="请输入其他备注" type="textarea" v-model="form.infomation" />
              </el-form-item>
            </el-col>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <!-- <div slot="header" class="clearfix">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button @click="handleAddFeeList" icon="el-icon-plus" plain size="mini" type="primary">选择费用
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button @click="handleExport()" v-if="this.form.id" icon="el-icon-download" plain size="mini"
                           type="warning">导出
                </el-button>
              </el-col>
            </el-row>
          </div> -->
          <el-table :data="form.feeList" v-loading="loadingOrderList" :max-height="tableMaxHeight">
            <el-table-column label="费用名称" align="center" prop="name" />
            <el-table-column label="费用类型" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.fee_type" :value="scope.row.type" />
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center" prop="money" />
            <el-table-column label="项目名称" align="center" prop="proName" />
            <el-table-column label="归属部门" align="center" prop="deptName" />
            <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
              <template slot-scope="scope">
                <el-popconfirm :title="`确认移除当前数据项？`" @confirm="handleDeleteRow(scope.row)" style="margin-left: 10px;">
                  <el-button icon="el-icon-delete" size="mini" slot="reference" type="text">移除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div class="dialog-footer" slot="footer">
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <goods-fee-list-for-select ref="goodsFeeListForSelect" @ok="updateOrderList"></goods-fee-list-for-select>

  </el-dialog>
</template>

<script>
  import {
    addAction,
    getAction,
    getById,
    updateAction,
    deepClone,
    downloadFile
  } from '@/api/manage';
  import GoodsFeeListForSelect from "../../goodsFee/GoodsFeeListForSelect";

  export default {
    name: "GoodsReimbursementFormForFee",
    dicts: ['imburse_status', 'yes_no', 'fee_type'],
    /*'reimburse_type', */
    components: {
      GoodsFeeListForSelect,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        loadingOrderList: false,
        activeName: "first",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          prjid: [{
            required: true,
            message: "项目名称不能为空",
            trigger: "blur"
          }],
          qkrmc: [{
            required: true,
            message: "请款人名称不能为空",
            trigger: "blur"
          }],
          qkrkhh: [{
            required: true,
            message: "请款人开户行不能为空",
            trigger: "blur"
          }],
          qkrzh: [{
            required: true,
            message: "请款人账号不能为空",
            trigger: "blur"
          }],
          zjyt: [{
            required: true,
            message: "资金用途不能为空",
            trigger: "blur"
          }],
          qksy: [{
            required: true,
            message: "请款事由不能为空",
            trigger: "blur"
          }],
          qkbz: [{
            required: true,
            message: "付款备注不能为空(不需备注请填“无”)",
            trigger: "blur"
          }],
          qkhj: [{
            required: true,
            message: "请款合计不能为空",
            trigger: "blur"
          }],
        },
        url: {
          getById: '/goodsReimbursement/goodsReimbursement/',
          add: '/goodsReimbursement/goodsReimbursement/add',
          edit: '/goodsReimbursement/goodsReimbursement/edit',
          addNew: '/goodsReimbursement/goodsReimbursement/addNew',
          editNew: '/goodsReimbursement/goodsReimbursement/editNew',
          // editOrderInfo: '/goodsOrderIn/goodsOrderIn/editForImburseId',
          digitUppercase: '/common/digitUppercase/',
          // prjNames: '/projectBaseInfo/projectBaseInfo/prjNames',
          // suppNames: '/goodsSupplier/goodsSupplier/suppNames',
        },
        orderIds: "",
        PrjNameOptions: [],
        SupplierNameOptions: [],
        newDate: "",
        tableMaxHeight: window.innerHeight - 320,
        queryParams: {

        },
        supplierId: "",
      };
    },
    computed: {
      visitedViews() {
        return this.$store.state.tagsView.visitedViews
      },
    },
    created() {

    },
    methods: {
      //费用管理模块调用入口
      createReimburseFromFee(row, type) {
        let that = this;
        that.reset();
        that.open = true;
        that.title = "费用报销";
        that.form.type = type;
        //获取请款事由月份并填充
        that.getCurrentMonth();
        let selectRows = [];
        selectRows.push(row);
        that.updateOrderList(selectRows);

      },
      handleAddFeeList() {
        let that = this;
        that.$refs.goodsFeeListForSelect.selectFeeListForImbursement(that.form.goodsIds);
      },
      //报销模块调用入口
      addNewreimbursementForFee(type) {
        let that = this;
        that.reset();
        that.open = true;
        that.title = "费用报销";
        that.form.type = type;
        //获取请款事由月份并填充
        that.getCurrentMonth();
      },
      handleExport() {
        let that = this;
        that.loading = false;
        that.queryParams.imburseId = that.form.id;
        that.$confirm('是否确认导出报销明细表?', "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          downloadFile('/goodsReimbursement/goodsReimbursement/export', that.queryParams);
        });
      },
      /*changeQksy(val) {
          let that = this;
          that.$set(that.form, "infomation", val);
      },*/
      getCurrentMonth() {
        let that = this;
        let Y = new Date().getFullYear();
        let M = new Date().getMonth() + 1;
        let M2 = new Date().getMonth();
        let D = new Date().getDate();
        // let times = Y + (M < 10 ? "-0" : "-") + M + (D < 10 ? "-0" : "-") + D;
        let times = Y + (M2 < 10 ? "年0" : "年") + M2 + "月";
        let nickName = that.$store.getters.nickName;
        that.$set(that.form, "qksy", times + nickName + "费用报销");
        that.$set(that.form, "infomation", times + that.$store.getters.nickName + "费用报销");
        that.$set(that.form, "qkrmc", that.$store.getters.nickName);
      },
      //金额转大写
      digitUppercase(num) {
        let that = this;
        getById(this.url.digitUppercase, num).then(response => {
          that.$set(this.form, "qkhj", response.msg);
        });
      },
      //删除当前行,并解除入库商品绑定的报销信息id
      handleDeleteRow(row) {
        let that = this;
        let id = row.id;
        let orderIds = "";
        let selectRows = [];
        let imburseMoney = 0;
        that.form.feeList.forEach(selectRow => {
          if (selectRow.id != id) {
            orderIds += "," + selectRow.id;
            selectRows.push(selectRow);
            imburseMoney = imburseMoney + selectRow.money
          }
        })
        that.form.goodsIds = orderIds;
        that.form.feeList = selectRows;
        that.form.imburseMoney = imburseMoney;
        that.form.remRemain = imburseMoney;
        that.digitUppercase(imburseMoney);
      },
      //打开选择商品弹窗
      /*handleAddFeeList() {
          this.$refs.GoodsFeeListForImbursement.showSelectFeeListPage(this.form.goodsIds);
      },*/
      //选择费用成功后,将选择的费用放进当前页面的列表中
      updateOrderList(selectRows) {
        let that = this;
        let orderIds = deepClone(that.form.goodsIds);
        let feeList = deepClone(that.form.feeList);
        let imburseMoney = deepClone(that.form.imburseMoney);
        for (let i = 0; i < selectRows.length; i++) {
          let row = selectRows[i];
          if (orderIds.indexOf(row.id) == -1) {
            orderIds += "," + row.id;
            feeList.push(row);
            imburseMoney = imburseMoney + row.money;
          }
        }
        //数字转换汉字并赋值
        that.digitUppercase(imburseMoney);
        that.form.goodsIds = orderIds;
        that.form.feeList = feeList;
        that.form.imburseMoney = imburseMoney;
        that.form.remRemain = imburseMoney;

      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          type: null,
          userId: this.$store.getters.userId,
          userName: this.$store.getters.nickName,
          imburseDate: new Date(),
          imburseMoney: null,
          taxId: null,
          taxNo: null,
          taxMoney: null,
          infomation: "",
          goodsIds: "",
          file: null,
          status: "0",
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          feeList: [],
          prjname: "",
          qkrmc: "",
          qkrkhh: "",
          qkrzh: "",
          zjyt: "",
          qksy: "",
          qkhj: "",
          qkbz: "",
          deptId: this.$store.getters.deptId,
          deptName: this.$store.getters.deptName,
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加费用报销信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        let that = this;
        that.reset();
        const id = row.id || that.ids;
        getById(that.url.getById, id).then(response => {
          that.form = response.data;
          that.open = true;
          that.title = "费用报销信息管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            that.form.status = "0";
            if (that.form.id != null) {
              updateAction(that.url.editNew, that.form).then(response => {
                that.$modal.msgSuccess("修改成功");
                that.open = false;
                that.$emit('ok');
              });
            } else {
              addAction(that.url.addNew, that.form).then(response => {
                that.$modal.msgSuccess("新增成功");
                that.open = false;
                that.$emit('ok');
              });
            }
          }
        });
      },
    }
  };
</script>
